<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>BBS 即时通讯系统</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <div class="container-fluid">
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">BBS 即时通讯系统</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav me-auto">
            <li class="nav-item">
              <a class="nav-link" href="#" data-page="home">首页</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#" data-page="forum">论坛</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#" data-page="chat">聊天室</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#" data-page="files">文件管理</a>
            </li>
          </ul>
          <div class="navbar-nav auth-section">
            <!-- 登录前显示 -->
            <div class="guest-section">
              <button class="btn btn-outline-light me-2" id="login-btn">登录</button>
              <button class="btn btn-light" id="register-btn">注册</button>
            </div>
            <!-- 登录后显示 -->
            <div class="user-section d-none">
              <span class="nav-link me-3 username-display"></span>
              <button class="btn btn-outline-light" id="logout-btn">登出</button>
            </div>
          </div>
        </div>
      </div>
    </nav>

    <!-- 主内容区域 -->
    <main class="container mt-4">
      <!-- 首页 -->
      <section id="home-page" class="page">
        <div class="jumbotron bg-light p-5 rounded">
          <h1 class="display-4">欢迎使用 BBS 即时通讯系统</h1>
          <p class="lead">这是一个基于 Web 的多用户即时通讯和论坛系统。</p>
          <hr class="my-4">
          <p>您可以在这里发帖回帖、参与讨论，也可以进行群聊和私聊。</p>
          <div class="mt-4">
            <a class="btn btn-primary btn-lg" href="#" data-page="forum" role="button">进入论坛</a>
            <a class="btn btn-success btn-lg ms-2" href="#" data-page="chat" role="button">进入聊天室</a>
          </div>
        </div>

        <div class="row mt-5">
          <div class="col-md-4">
            <div class="card">
              <div class="card-body">
                <h5 class="card-title">论坛功能</h5>
                <p class="card-text">发布帖子、回复评论、参与讨论。</p>
              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="card">
              <div class="card-body">
                <h5 class="card-title">即时聊天</h5>
                <p class="card-text">支持群聊和私聊，消息实时送达。</p>
              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="card">
              <div class="card-body">
                <h5 class="card-title">文件共享</h5>
                <p class="card-text">上传下载文件，轻松分享资源。</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 论坛页面 -->
      <section id="forum-page" class="page d-none">
        <div class="d-flex justify-content-between align-items-center mb-4">
          <h2>论坛</h2>
          <button class="btn btn-primary" id="new-post-btn">发布新帖</button>
        </div>

        <div class="forum-content">
          <!-- 帖子列表 -->
          <div id="posts-list" class="list-group mb-4">
            <!-- 帖子内容将通过JavaScript动态加载 -->
            <div class="text-center py-5">
              <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">加载中...</span>
              </div>
            </div>
          </div>

          <!-- 分页 -->
          <nav aria-label="Page navigation">
            <ul class="pagination justify-content-center" id="pagination">
              <!-- 分页内容将通过JavaScript动态加载 -->
            </ul>
          </nav>
        </div>

        <!-- 帖子详情 -->
        <div id="post-detail" class="d-none">
          <button class="btn btn-outline-secondary mb-3" id="back-to-posts-btn">返回帖子列表</button>

          <div class="card mb-4">
            <div class="card-header d-flex justify-content-between">
              <span id="post-title"></span>
              <small id="post-meta"></small>
            </div>
            <div class="card-body">
              <p id="post-content"></p>
            </div>
          </div>

          <h4 class="mb-3">评论</h4>
          <div id="comments-list" class="mb-4">
            <!-- 评论将通过JavaScript动态加载 -->
          </div>

          <div class="card">
            <div class="card-body">
              <h5 class="card-title">添加评论</h5>
              <textarea id="comment-content" class="form-control mb-3" rows="3" placeholder="请输入您的评论..."></textarea>
              <button id="submit-comment" class="btn btn-primary">提交评论</button>
            </div>
          </div>
        </div>
      </section>

      <!-- 聊天室页面 -->
      <section id="chat-page" class="page d-none">
        <h2 class="mb-4">聊天室</h2>

        <div class="row">
          <!-- 用户列表和房间 -->
          <div class="col-md-3">
            <div class="card mb-3">
              <div class="card-header d-flex justify-content-between align-items-center">
                <span>房间</span>
                <button class="btn btn-sm btn-outline-primary" id="create-room-btn" title="创建新房间">
                  <i class="bi bi-plus"></i>
                </button>
              </div>
              <div class="card-body p-0">
                <div class="list-group list-group-flush" id="rooms-list">
                  <button class="list-group-item list-group-item-action active" data-room="public">公共聊天室</button>
                  <!-- 其他房间通过JavaScript动态加载 -->
                </div>
              </div>
            </div>

            <div class="card">
              <div class="card-header">在线用户</div>
              <div class="card-body p-0">
                <div class="list-group list-group-flush" id="users-list">
                  <!-- 用户列表通过JavaScript动态加载 -->
                </div>
              </div>
            </div>
          </div>

          <!-- 聊天区域 -->
          <div class="col-md-9">
            <div class="card">
              <div class="card-header d-flex justify-content-between align-items-center">
                <span id="current-chat-title">公共聊天室</span>
                <span id="chat-status" class="badge bg-success">在线</span>
              </div>
              <div class="card-body">
                <div id="chat-messages" class="chat-messages mb-3">
                  <!-- 消息通过JavaScript动态加载 -->
                </div>

                <div class="input-group">
                  <input type="text" id="message-input" class="form-control" placeholder="输入消息...">
                  <button id="send-file-btn" class="btn btn-outline-primary" title="发送文件">
                    <i class="bi bi-paperclip"></i>
                  </button>
                  <button id="send-message-btn" class="btn btn-primary">发送</button>
                </div>
                <input type="file" id="file-input" style="display: none;">
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 文件管理页面 -->
      <section id="files-page" class="page d-none">
        <div class="d-flex justify-content-between align-items-center mb-4">
          <h2>文件管理</h2>
          <button class="btn btn-primary" id="upload-file-btn">上传文件</button>
        </div>

        <div class="card">
          <div class="card-header">我的文件</div>
          <div class="card-body">
            <table class="table table-hover">
              <thead>
                <tr>
                  <th>文件名</th>
                  <th>大小</th>
                  <th>上传时间</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody id="files-list">
                <!-- 文件列表通过JavaScript动态加载 -->
              </tbody>
            </table>
          </div>
        </div>

        <input type="file" id="upload-file-input" style="display: none;">
      </section>
    </main>

    <!-- 模态框 -->
    <!-- 登录模态框 -->
    <div class="modal fade" id="login-modal" tabindex="-1" aria-labelledby="loginModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="loginModalLabel">用户登录</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <form id="login-form">
              <div class="mb-3">
                <label for="login-username" class="form-label">用户名</label>
                <input type="text" class="form-control" id="login-username" required>
              </div>
              <div class="mb-3">
                <label for="login-password" class="form-label">密码</label>
                <input type="password" class="form-control" id="login-password" autocomplete="current-password"
                  required>
              </div>
              <div class="alert alert-danger d-none" id="login-error"></div>
              <button type="submit" class="btn btn-primary w-100">登录</button>
            </form>
          </div>
        </div>
      </div>
    </div>

    <!-- 注册模态框 -->
    <div class="modal fade" id="register-modal" tabindex="-1" aria-labelledby="registerModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="registerModalLabel">用户注册</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <form id="register-form">
              <div class="mb-3">
                <label for="register-username" class="form-label">用户名</label>
                <input type="text" class="form-control" id="register-username" required>
              </div>
              <div class="mb-3">
                <label for="register-email" class="form-label">邮箱</label>
                <input type="email" class="form-control" id="register-email">
              </div>
              <div class="mb-3">
                <label for="register-password" class="form-label">密码</label>
                <input type="password" class="form-control" id="register-password" autocomplete="new-password" required>
              </div>
              <div class="mb-3">
                <label for="register-password-confirm" class="form-label">确认密码</label>
                <input type="password" class="form-control" id="register-password-confirm" autocomplete="new-password"
                  required>
              </div>
              <div class="alert alert-danger d-none" id="register-error"></div>
              <button type="submit" class="btn btn-primary w-100">注册</button>
            </form>
          </div>
        </div>
      </div>
    </div>

    <!-- 发布帖子模态框 -->
    <div class="modal fade" id="new-post-modal" tabindex="-1" aria-labelledby="newPostModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="newPostModalLabel">发布新帖</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <form id="new-post-form">
              <div class="mb-3">
                <label for="post-title-input" class="form-label">标题</label>
                <input type="text" class="form-control" id="post-title-input" required>
              </div>
              <div class="mb-3">
                <label for="post-content-input" class="form-label">内容</label>
                <textarea class="form-control" id="post-content-input" rows="5" required></textarea>
              </div>
              <div class="alert alert-danger d-none" id="post-error"></div>
              <button type="submit" class="btn btn-primary w-100">发布</button>
            </form>
          </div>
        </div>
      </div>
    </div>

    <!-- 创建房间模态框 -->
    <div class="modal fade" id="create-room-modal" tabindex="-1" aria-labelledby="createRoomModalLabel"
      aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="createRoomModalLabel">创建新房间</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <form id="create-room-form">
              <div class="mb-3">
                <label for="room-name-input" class="form-label">房间名称</label>
                <input type="text" class="form-control" id="room-name-input" required maxlength="50">
              </div>
              <div class="mb-3">
                <label for="room-description-input" class="form-label">房间描述</label>
                <textarea class="form-control" id="room-description-input" rows="3" maxlength="200"></textarea>
              </div>
              <div class="mb-3">
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" id="room-private-checkbox">
                  <label class="form-check-label" for="room-private-checkbox">
                    私有房间（需要密码）
                  </label>
                </div>
              </div>
              <div class="mb-3 d-none" id="room-password-section">
                <label for="room-password-input" class="form-label">房间密码</label>
                <input type="password" class="form-control" id="room-password-input" autocomplete="new-password"
                  maxlength="20">
                <div class="form-text">设置密码后，其他用户需要输入密码才能加入房间</div>
              </div>
              <div class="alert alert-danger d-none" id="room-error"></div>
              <button type="submit" class="btn btn-primary w-100">创建房间</button>
            </form>
          </div>
        </div>
      </div>
    </div>

    <!-- 加入房间模态框 -->
    <div class="modal fade" id="join-room-modal" tabindex="-1" aria-labelledby="joinRoomModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="joinRoomModalLabel">加入房间</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <form id="join-room-form">
              <div class="mb-3">
                <label for="join-room-password-input" class="form-label">房间密码</label>
                <input type="password" class="form-control" id="join-room-password-input"
                  autocomplete="current-password" required>
                <div class="form-text">这是一个私有房间，需要密码才能加入</div>
              </div>
              <div class="alert alert-danger d-none" id="join-room-error"></div>
              <button type="submit" class="btn btn-primary w-100">加入房间</button>
            </form>
          </div>
        </div>
      </div>
    </div>

  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  <script src="https://cdn.socket.io/4.6.0/socket.io.min.js"></script>
  <script src="js/utils.js"></script>
  <script src="js/app.js"></script>
  <script src="js/auth.js"></script>
  <script src="js/forum.js"></script>
  <script src="js/chat.js"></script>
  <script src="js/files.js"></script>
</body>

</html>